    <template>
    <el-dialog v-model="dialogVisible" title="绑定商户" width="400" >
      <el-form
      ref="formRef"
      :model="formData"
      label-width="400px"
    >
      <el-select
        v-model="formData.merchantId"
        filterable
        remote
        reserve-keyword
        placeholder="请绑定商户"
        remote-show-suffix
        :remote-method="remoteMethod"
        :loading="merchantLoading"
        
      >
        <el-option
          v-for="item in merchantOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleBind">
          确认
        </el-button>
      </div>
    </template>
    </el-dialog>
  </template>

<script lang="ts" setup>

import { getAccessToken, getTenantId } from '@/utils/auth'
import * as MerchantAPi from '@/api/mall/merchant/index'
import * as UserApi from '@/api/system/user'
defineOptions({ name: 'SystemUserImportForm' })

const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const updateSupport = ref(0) // 是否更新已经存在的用户数据
interface MerchantItem {
  value: string
  label: string
}
interface MerchanVo {
  id: string
  name: string
}
const formData = ref({
  merchantId:'',
  systemUserId:0
})
const merchantLoading=ref(false)
const merchantOptions = ref<MerchantItem[]>([])

/** 打开弹窗 */
const open = (row: UserApi.UserVO) => {
  dialogVisible.value = true
  updateSupport.value = 0
  formData.value.merchantId=''
  formData.value.systemUserId=row.id
  merchantOptions.value = []
  merchantLoading.value = false
   fetchData()

}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


const remoteMethod = (query: string) => {
  if (query) {
    merchantLoading.value = true
    MerchantAPi.getMerchantPage({
      pageNo: 1,
      pageSize: 10,
      name: query,
    }).then((res)=>{
      merchantLoading.value = false
      merchantOptions.value = res.list.filter((item:MerchanVo) => {
        return item.name.toLowerCase().includes(query.toLowerCase())
      }).map((item:MerchanVo)=>{
        return {
          value: item.id,
          label: item.name
        }
      })
    }).catch((err)=>{
      merchantLoading.value = false
      merchantOptions.value = []
    })

  } else {
    merchantOptions.value = []
  }
}

const emit = defineEmits(['success']) 
const handleBind = () => {
  if(formData.value.merchantId===''){
    message.error('请选择商户')
    return
  }
  MerchantAPi.bindMerchantToUser(formData.value).then(()=>{
    message.success('绑定成功')
    emit('success')
    dialogVisible.value = false
  }).catch((err)=>{
    message.error(err.message)
  })    
}
const fetchData=()=>{
  merchantLoading.value=true
  UserApi.getUser(formData.value.systemUserId).then((res)=>{
    formData.value.merchantId=res.merchantId;
    merchantOptions.value=[{
      value:res.merchantId,
      label:res.merchantName
    }]
    merchantLoading.value=false
  })
}

</script>
